<template>
  <div>
    <h1>我是app.vue</h1>
    <button @click="msg = 'hello' ">修改msg</button>
    <button @click="list.push(99)">添加元素</button>
    <p>{{ msg }}</p>
    <p>{{ list }}</p>

    <button @click="show = false">销毁son</button>
    <son v-if="show"/>
  </div>
</template>

<script>
import son from './components/son'
export default {
  components: {
    son
  },
  data() {
    return {
      msg: '你好',
      list: [1,2,3],
      show: true
    }
  },
  methods: {
    fn () {
      console.log('我是fn')
    }
  },
  // 钩子跟data和methods这些平级，不要写到methods，不要写到methods里，不要写到methods
  // 创建前
  beforeCreate () {
    // 访问不到数据
    console.log('beforeCreate', this.msg) // undefined
    // this.fn() 无法调用，会报错
  },

  // 创建后
  created () {

    // 可以访问到数据
    console.log('created', this.msg) // 你好
    // this.fn() // 可以调用

    // 所以一般会在这个钩子里获取数据，再赋值到data里
  },

  // 渲染前
  beforeMount () {
    console.log('beforeMount', document.querySelector('p'))
  },
  // 渲染后
  mounted () {
    console.log('mounted', document.querySelector('p'))
  },
  
  // 更新前：只是数据改变，界面还没重新渲染
  beforeUpdate () {
    // debugger 打断点
    console.log('beforeUpdate',this.msg, document.querySelector('p').innerText)
  },
  // 更新后：数据改变且界面重新渲染
  updated () {
    // debugger 打断点
    console.log('updated', this.msg, document.querySelector('p').innerText)
  }
}
</script>

<style>

</style>